<template>
  <div class="container">
    <div class="headerTitle">
      <img src="@/assets/欣环卫智慧安全平台.png" alt="" />
    </div>

    <div class="formBox">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="login_form"
      >
        <el-form-item prop="username">
          <div class="formItem">
            <div class="inputTitle"><img src="@/assets/账号.png" alt="" /></div>
            <input
              type="text"
              placeholder="请输入账号"
              v-model="ruleForm.username"
              class="elInputStyle"
            />
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="formItem">
            <div class="inputTitle"><img src="@/assets/密码.png" alt="" /></div>
            <input
              type="password"
              placeholder="请输入密码"
              v-model="ruleForm.password"
              class="elInputStyle"
            />
          </div>
        </el-form-item>

        <div class="bottomBox">
          <div class="bottomLogin">
            <img @click="submitForm()" src="@/assets/登录.png" alt="" />
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { loginApi } from '@/api/index'
export default {
  name: 'loginPage',
  props: {},
  components: {},
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码' }],
      },
    }
  },
  methods: {
    async submitForm() {
      const res = await loginApi({
        userName: this.ruleForm.username,
        password: this.ruleForm.password,
      })
      //  console.log(res);
      if (res.code == 0) {
        sessionStorage.setItem('loginInfo', JSON.stringify(res.data))
        this.$store.commit('storeToken', res.data)
        this.$router.push('/index')
      }
    },
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.headerTitle {
  z-index: 99;
  background-image: url('@/assets/色相／饱和度 530.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  box-sizing: border-box;
  width: 1337px;
  height: 137px;
  line-height: 137px;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  color: #fff;
  margin: 0 50%;
  transform: translateX(-50%);
}
.container {
  width: 1920px;
  height: 1080px;
  background-image: url('@/assets/图层 1.png');
  .formBox {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 137px;
    padding: 210px 185px 0;
    border-radius: 10px;
    width: 1050px;
    height: 690px;
    background-image: url('@/assets/欢迎登录！.png');
    box-sizing: border-box;
    .formItem {
      display: flex;
      align-items: center;
      background-color: #0a1c1d;
      width: 680px;
      border: 1px solid #285052;
      height: 56px;
      line-height: 56px;
      border-radius: 5px;
      // padding: 12px 0;
      // box-sizing: border-box;
      input::placeholder {
        color: #aacbcd; /* 设置 placeholder 文本的颜色 */
        // font-style: italic; /* 可选：设置字体风格 */
        font-size: 18px;
      }
      input:focus {
        border: none; /* 添加自定义边框 */
        box-shadow: none; /* 添加阴影效果 */
      }
      input {
        border: none; /* 移除边框 */
        outline: none; /* 移除聚焦时的轮廓线 */
        font-size: 18px;
      }
    }

    .elInputStyle {
      width: 300px;
      padding-left: 20px;
      height: 30px;
      background-color: #0a1c1d !important;
      border: none;
      color: #aacbcd !important;
    }

    .el-form-item {
      margin-bottom: 10px;
    }
    .inputTitle {
      font-weight: 800;
      font-size: 24px;
      color: #fff;
      // margin-bottom: 16px;
      letter-spacing: 0.3em;
      font-family: Source Han Sans;
      padding: 10px 24px;
      // margin-right: 24px;
      img {
        border-right: 1px solid #285052;
        padding-right: 24px;
      }
    }
    .submitBtn {
      width: 233px;
      height: 87px;
      text-align: center;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 0.4em;
      line-height: 50px;
      background-color: transparent;
      border: none;
      padding: 0;
      margin-top: 40px;

      background-image: url('@/assets/色相／饱和度 534.png');
    }
  }
}
.bottomBox {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bottomLogin {
  background-image: url('@/assets/色相／饱和度 534.png');
  width: 233px;
  height: 87px;
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}
</style>
